<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ovalidator-Demo</title>
<link rel="stylesheet" type="text/css" href="/misc/css/reset.css"  />
<script type="text/javascript" src="../misc/vendors/jquery/jquery_1.3.2.js"></script>
<script type="text/javascript" src="../misc/vendors/js/debug.js"></script>
<script type="text/javascript" src="../misc/vendors/js/dhtml.js"></script>
<script type="text/javascript" src="../misc/vendors/o2js/o2validator/o2validator.js"></script>
<style type="text/css">
html,body{
height:100%;
width:100%;
}
*{
margin:0px;
padding:0px;
font-family:"微软雅黑", "新宋体", Arial;
font-size:12px;
}
h1{
font-size:36px;
font-family: "Times New Roman", Times, serif;
}
h3{
font-family:"Courier New", Courier, monospace
}
table{
border-collapse:collapse;
}
td{
text-align:center;
padding:0.3em 0.3em;
border-top:1px solid #AA8E71 ;
border-right:1px solid #AA8E71 ;
border-bottom:1px solid #AA8E71 ;
border-left:1px solid #AA8E71 ;
background-color:#FFEFDF ;
color:#554739;
}
.head{
text-align:center;
margin:2px;
border:1px dashed #FFB380;
background-color:#FFD9BF;
color:#FF6600;
position:absolute;
width:97.8%;
z-index:1000;
}
.content{
overflow-y:scroll;
overflow-x:hidden;
height:100%;
width:100%;
text-align:center;
}
.content .main{ 
margin:2px;
margin-top:70px;
margin-left:500px;
}
.footer{
position:absolute;
top:66px;
z-index:1000;
border:1px dashed #AA8E71;
background-color:#FFEFDF;
color:#554739;
margin:2px;
width:480px;
font-weight:bold;
}
.ul1 li{
list-style-type:decimal;
margin-left:25px;
}
.ul2 li{
list-style-type:lower-latin
}
.main td{
padding:1px;
}
</style>
<script type="text/javascript">
/* 启动执行 */
$(document).ready(function(){
	oValidator.add([
		{
			id:'text1',name:'第1行',error:'数字范围(5-16)',type:'numarea',min:5,max:16},
		{
			id:'text2',name:'第2行',error:'字符长度（8-50）',type:'strarea',min:8,max:50},
		{
			id:'text3',name:'第3行',error:'不能为空',empty:false},
		{
			id:'text4',name:'第4行',error:'邮件地址',type:'regexp',regkey:'reg_email',val:'@'},
		{
			id:'text5',name:'第5行',error:'仅中文',type:'regexp',regkey:'reg_chinese'},
		{
			id:'text6',name:'第6行',error:'身份证',type:'regexp',regkey:'reg_idcard'},
		{
			id:'text7',name:'第7行',error:'一定是图片文件',type:'regexp',regkey:'reg_picture'},
		{
			id:'text8',name:'第8行',error:'正整数',type:'regexp',regkey:'reg_int1'},
		{
			id:'text9',name:'第9行',error:'整数',type:'regexp',regkey:'reg_int'},
		{
			id:'text10',name:'第10行',error:'URL',type:'regexp',regkey:'reg_url',val:'http://'},
		{
			id:'text11',name:'第11行',error:'配由数字、26个英文字母或者下划线组成的字符串',type:'regexp',regkey:'reg_username'},
		{
			id:'text12',name:'第12行',error:'是否满足了外部函数判断',func:_func},
		{
			id:'text13',name:'第13行',error:'必须是11位的手机号码',type:'strarea',min:11,max:11,empty:true},
		{
			id:'text14',name:'第14行',error:'日期不对',type:'date'},
		{
			id:'text15',name:'第15行',error:'请选择性别',without:'-1'}
	]); 
});
//外部函数
function _func(_id,_obj){
	if($('#text12').val() == '' && $('#text12_1').val() == ''){
		return true;
	}else{
		if($('#text12').val() != '' && $('#text12_1').val() != ''){
			return true;
		}else{
			return false;
		}
	}
}

function fnTest(){
	if(oValidator.pass()){
		alert('全部ok!');
	}else{
		var error_str = oValidator.error_str('\n');
		//or ... 
		//var error_str = oValidator.error_str().join('\n');
		alert(error_str);
	}
}
function fnOut(){
	oValidator.out('text1');
	// or ...  oValidator.out('text1');
}
function fnState(){
	//当前处理的ovalidator element对象
	debug(oValidator.status());
}
function fnError1(){
	//string
	debug(oValidator.error_str());
}
function fnError2(){
	//dom
	debug(oValidator.error_dom());
}
function fnError3(){
	//jquery obj 
	debug(oValidator.error_obj());
}
</script>
</head>
<body>
<div class="head">
  <h1>ovalidator-demo</h1>
  <h3>2008.1.28 by apeng</h3>
</div>
<div class="footer">
  <p>注意:</p>
  <ul class="ul1" >
    <li> 当前支持三种验证方式
      <ul class="ul2" >
        <li>数字范围</li>
        <li>字母长度范围</li>
        <li>正则表达</li>
        <li>外部函数判断</li>
        <li>非空 与以上组合</li>
      </ul>
    </li>
    <li> 关于正则方式，可以自行扩充，在vendors/js/ovalidator.js文件中的eRegexEnum数组中 </li>
    <li> 其他具体操作请参考源文件，或电邮给我 zhoupeng10@gmail.com </li>
  </ul>
  <div style="margin-top:20px;">
    <input type="button" style="margin-left:5px;" value="去掉一个验证" onclick="fnOut()"  />
    <input type="button" style="margin-left:5px;" value="状态" onclick="fnState()"  />
    <input type="button" style="margin-left:5px;" value="得到错误数组1" onclick="fnError1()"  />
    <input type="button" style="margin-left:5px;" value="得到错误数组2" onclick="fnError2()"  />
    <input type="button" style="margin-left:5px;" value="得到错误数组3" onclick="fnError3()"  />
  </div>
  <div style="margin:20px;text-align:center">
    <input type="button" style="width:100px;height:50px;font-size:18px;font-family:'微软雅黑', '新宋体', Arial"  value="验证" onclick="fnTest()" />
  </div>
</div>
<div class="content">
  <div class="main">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="151" align="right">1数字范围(5-16)</td>
        <td width="168"><input   type="text" id="text1"  /></td>
      </tr>
      <tr>
        <td align="right">2字符长度（8-50）</td>
        <td><input   type="text" id="text2"></td>
      </tr>
      <tr>
        <td align="right">3不能为空</td>
        <td><input  type="text" id="text3"></td>
      </tr>
      <tr>
        <td align="right">4邮件地址</td>
        <td><input  type="text" id="text4"></td>
      </tr>
      <tr>
        <td align="right">5仅中文</td>
        <td><input  type="text" id="text5"></td>
      </tr>
      <tr>
        <td align="right">6身份证</td>
        <td><input  type="text" id="text6"></td>
      </tr>
      <tr>
        <td align="right">7一定是图片文件</td>
        <td><input type="file" id="text7"></td>
      </tr>
      <tr>
        <td align="right">8正整数</td>
        <td><input  type="text" id="text8"></td>
      </tr>
      <tr>
        <td align="right">9整数</td>
        <td><input  type="text" id="text9"></td>
      </tr>
      <tr>
        <td align="right">10URL</td>
        <td><input  type="text" id="text10"></td>
      </tr>
      <tr>
        <td align="right">11匹配由数字、26个英文字母或者下划线组成的字符串</td>
        <td><input  type="text" id="text11"></td>
      </tr>
      <tr>
        <td align="right">12电话</td>
        <td><input style="width:50px;" type="text" id="text12">
          -
          <input  type="text" id="text12_1"></td>
      </tr>
      <tr>
        <td align="right">13手机</td>
        <td><input  type="text" id="text13"  ></td>
      </tr>
      <tr>
        <td align="right">14日期(YYYY-MM-DD)</td>
        <td><input type="text" id="text14" /></td>
      </tr>
      <tr>
        <td align="right">15请选择性别</td>
        <td><select id="text15">
            <option value="-1"> 请选择... </option>
            <option value="0"> 男 </option>
            <option value="1"> 女 </option>
          </select></td>
      </tr>
      <tr>
        <td align="right">......</td>
        <td>......</td>
      </tr>
      <tr>
        <td align="right">......</td>
        <td>......</td>
      </tr>
      <tr>
        <td align="right">......</td>
        <td>......</td>
      </tr>
      <tr>
        <td align="right">......</td>
        <td></td>
      </tr>
    </table>
  </div>
</div>
<style type="text/css">
/* 这个自动加的样式类，如果你没有定义，那获得焦点，出错了，那些输入框就没有这些突出的样式显示了，当然，你可以自己定义 */
.ovalidator-error{
border:1px dashed #FF0000!important;
}
.ovalidator-focus{
border:1px dashed #0000CC;
}
</style>
</body>
</html>
